<template>
    <section>
        <DetailsHeader title="申请提现" class="mb-24"></DetailsHeader>

        <div class="card">
            <a-form :model="baseForm" ref="baseFormRef" :label-col="{ style: { width: '180px' } }">
                <a-form-item name="amount" label="提现金额" :rules="[{ required: true, message: '请输入提现金额' }]">
                    <a-input-number placeholder="请输入提现金额" v-model:value="baseForm.amount" style="width: 300px;"
                        :max="commission" />
                    <span style="margin: 0 8px;">元</span>
                    <info-circle-filled style="margin-right: 5px;" /><span class="fz-12 mr-8"
                        >当前可提现金额<span class="col-money">¥{{ commission }}</span></span>
                </a-form-item>
                <a-form-item label="提现类型" name="type" :rules="[{ required: true, message: '请选择提现类型' }]">
                    <a-radio-group v-model:value="baseForm.type">
                        <a-radio :value="1">个人</a-radio>
                        <a-radio :value="2">企业<span>(需提供6个点的增值税专用发票)</span></a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="转账服务费+代缴个税" v-if="baseForm.type == 1">
                    <div v-if="baseForm.type == 1">{{ baseForm.amount ? (baseForm.amount * 0.06).toFixed(2) : 0 }}元</div>
                    <div v-if="baseForm.type == 2">0 元</div>
                </a-form-item>
                <a-form-item label="费率" v-if="baseForm.type == 1">
                    <div>6%</div>
                </a-form-item>
                <a-form-item label="实际到手金额">
                    <div v-if="baseForm.type == 1">{{ baseForm.amount ? (baseForm.amount - baseForm.amount *
                        0.06).toFixed(2) :
                        baseForm.amount }}元</div>
                    <div v-if="baseForm.type == 2">{{ baseForm.amount }}元</div>
                </a-form-item>
                <a-form-item label="提现方式">
                    <div v-if="baseForm.type == 1">
                        <a-button v-if="!personalAccountList.length" @click="handleAdd" type="link">请先绑定收款账户</a-button>
                        <div v-else>个人</div>
                    </div>

                    <div v-if="baseForm.type == 2">
                        <a-button v-if="!enterpriseAccountList.length" @click="handleAdd" type="link">请先绑定收款账户</a-button>
                        <div v-else>企业</div>
                    </div>
                </a-form-item>
            </a-form>
        </div>

        <div class="page-bottom">
            <info-circle-filled style="color:#D9D9D9;margin-right: 5px;" /><span
                class="fz-12 col-8A93A7 mr-8">提现审核通过后，预计<span class="tips">3-5个工作日</span>到账</span>
            <a-button type="primary" @click="onFinish" style="display:flex;align-item:center;"><svg-icon name="icon_release"
                    style="width:20px;height:20px;margin-right: 8px;color: #ffffff;" />提交</a-button>
        </div>

        <!-- 个人收款账户 -->
        <a-modal v-model:visible="personVisible" title="个人收款账户" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="accountName" label="持卡人" :rules="[{ required: true, message: '请输入姓名' }]">
                    <a-input placeholder="请输入姓名" v-model:value="form.accountName"></a-input>
                </a-form-item>
                <a-form-item name="cardNum" label="银行账号" :rules="[{ required: true, message: '请输入银行账号' }]">
                    <a-input placeholder="请输入银行账号" v-model:value="form.cardNum"></a-input>
                </a-form-item>
                <a-form-item name="phone" label="手机号" :rules="[{ required: true, validator: validPhone }]">
                    <a-input placeholder="手机号" v-model:value="form.phone"></a-input>
                </a-form-item>
                <a-form-item name="idNum" label="身份证号码" :rules="[{ required: true, validator: validIdCard }]">
                    <a-input placeholder="请输入身份证号" v-model:value="form.idNum"></a-input>
                </a-form-item>
                <a-form-item>
                    提示：请务必保证填写信息的准确性，否则您将无法收到资金
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 企业收款账户 -->
        <a-modal v-model:visible="enterpriseVisible" title="企业收款账户" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="companyName" label="收款单位名称" :rules="[{ required: true, message: '请输入收款单位名称' }]">
                    <a-input placeholder="请输入收款单位名称" v-model:value="form.companyName"></a-input>
                </a-form-item>
                <a-form-item name="cardNum" label="银行账户" :rules="[{ required: true, message: '请输入银行账号' }]">
                    <a-input placeholder="请输入银行账号" v-model:value="form.cardNum"></a-input>
                </a-form-item>
                <a-form-item name="bankName" label="开户银行名称" :rules="[{ required: true, message: '请输入开户银行名称' }]">
                    <a-input placeholder="请输入开户银行名称" v-model:value="form.bankName"></a-input>
                </a-form-item>
                <a-form-item name="companyRegisterPhone">
                    提示：请务必保证填写信息的准确性，否则您将无法收到资金
                </a-form-item>
            </a-form>
        </a-modal>

    </section>
</template>
<script setup name="CostAccount">
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { providerWithdraw } from 'api/modules/api.owner'
import { XsyMessage } from '@/libs/util.toast'
import { addWithdrawAccount, getWithdrawAccountApi } from 'api/modules/api.cost'
import { validIdCard, validPhone } from '@/libs/util.valid.js'
import {
    InfoCircleFilled
} from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const commission = route.query.commission

const baseForm = ref({})
const form = ref({})
const personVisible = ref(false)
const enterpriseVisible = ref(false)

// 获取提现账户列表 分个人账户和企业账户
const personalAccountList = ref([])
const enterpriseAccountList = ref([])
const getList = () => {
    getWithdrawAccountApi().then(res => {
        if (res.data?.list?.length && res.code == 0) {
            personalAccountList.value = res.data.list.filter(item => item.type == 1)
            enterpriseAccountList.value = res.data.list.filter(item => item.type == 2)
        }
    })
}

getList()

const handleAdd = () => {
    if (baseForm.value.type == 1) {
        personVisible.value = true
    } else {
        enterpriseVisible.value = true
    }
}

const baseFormRef = ref()
const onFinish = () => {
    baseFormRef.value.validateFields().then(() => {
        providerWithdraw(baseForm.value).then(res => {
            if (res.code == 0) {
                XsyMessage.success('操作成功');
                router.push('/owner/fund-records')
            }
        })
    })

};

const formRef = ref();

const handleOk = async () => {
    const params = {
        ...form.value,
        type: baseForm.value.type
    }
    try {
        const values = await formRef.value.validateFields();
        addWithdrawAccount(params).then((res) => {
            if (res.code == 0) {
                XsyMessage.success('操作成功');
                personVisible.value = false
                enterpriseVisible.value = false
                getList()
                formRef.value.resetFields();
            }
        })
    } catch (errorInfo) {

    }
}

// 点击取消重置表单
const handleCancel = () => {
    formRef.value.resetFields();
}

</script>

<style scoped lang="scss">
.card {
    background: #fff;
    padding: 15px 20px;
    border-radius: 6px;
}

.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;

    .tips {
        color: #FAAD14;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}
</style>